<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
</head>

<body>
  <canvas id="visualNovelCanvas" width="800" height="600"></canvas>
  <script>
    const canvas = document.getElementById('visualNovelCanvas');
    const ctx = canvas.getContext('2d');

    let currentScene = 0;
    const scenes = [
      {
        text: '场景一：这是一个开始。',
        backgroundImage: null // 可以设置背景图片路径
      },
      {
        text: '场景二：故事继续发展。',
        backgroundImage: null
      }
    ];

    function drawScene() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      if (scenes[currentScene].backgroundImage) {
        const img = new Image();
        img.src = scenes[currentScene].backgroundImage;
        img.onload = () => ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
      }
      ctx.fillStyle = 'white';
      ctx.font = '20px Arial';
      ctx.textAlign = 'left';
      ctx.textBaseline = 'top';
      ctx.fillText(scenes[currentScene].text, 20, 20);
    }

    document.addEventListener('keydown', (event) => {
      if (event.key === 'ArrowRight') {
        currentScene++;
        if (currentScene >= scenes.length) {
          currentScene = 0;
        }
        drawScene();
      }
    });

    drawScene();
  </script>
</body>

</html>